<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="referrer" content="no-referrer"/>
    <title>电影推荐首页--数据更新</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <style>
        .zaoceng {
            display: block;
            background-color: black;
            width: 100%;
            position: absolute;
            height: 100%;
            opacity: 0.8;
            z-index: 1000;
            background: url("/static/image/loading.gif");

        }
        .badge-danger{
            background: red;
        }
        .badge-success{
             background: springgreen;
        }
        .btn-primary{
            background: dodgerblue;
        }

    </style>
    <!-- Add custom CSS here -->
    <link href="/static/css/sb-admin.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    <!-- Page Specific CSS -->
    <link rel="stylesheet" href="/static/css/morris-0.4.3.min.css">
</head>

<body>
<div id="app">
    <div id="wrapper">

        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">电影推荐系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                {% comment %}  菜单栏  {% endcomment %}
                <ul class="nav navbar-nav side-nav">

                     <li class="active"><a href="http://127.0.0.1:8000/index/">
                        <i class="fa fa-indent"></i>&nbsp;&nbsp;&nbsp;首页</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/renmen/href/">
                       <i class="fa fa-fire"></i>&nbsp;&nbsp;&nbsp;热门电影推荐</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/new/href/">
                       <i class="fa fa-text-height"></i>&nbsp;&nbsp;最新电影推荐</a>
                    </li>

                    <li class="">
                         <a href="http://127.0.0.1:8000/jingdian/href/">
                       <i class="fa fa-bullhorn"></i>&nbsp;&nbsp;经典电影推荐</a>
                    </li>

                    <li class="">
                         <a href="http://127.0.0.1:8000/top/href">
                       <i class="fa fa-glass"></i>&nbsp;&nbsp;豆瓣高分电影推荐</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/comment/href">
                      <i class="fa fa-sort-amount-desc"></i>&nbsp;&nbsp;豆瓣最新影评</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/updtate/href/">
                       <i class="fa fa-wrench"></i>&nbsp;&nbsp;更新数据系统</a>
                    </li>

                    <li class="">
                         <a href="http://127.0.0.1:8000/all/href">
                      <i class="fa fa-sort-amount-desc"></i>&nbsp;&nbsp;所有电影</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/recommend/href">
                      <i class="fa fa-sort-amount-desc"></i>&nbsp;&nbsp;协同过滤推荐</a>
                    </li>

                </ul>

                <ul class="nav navbar-nav navbar-right navbar-user">
                    <li class="dropdown messages-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i>
                            Messages
                            <span class="badge">7</span> <b class="caret"></b></a>

                    </li>
                    <li class="dropdown alerts-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> Alerts
                            <span
                                    class="badge">3</span> <b class="caret"></b></a>

                    </li>
                    <li class="dropdown user-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>
                            {%verbatim %} {{ userss }} {% endverbatim %} <b
                                    class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                            <li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
                            <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="http://127.0.0.1:8000/login/"><i class="fa fa-power-off"></i> Log Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
        <div id="page-wrapper">

            <div style="height: 1200px;width: 100%;overflow-y: auto">

                 <table class="table table-bordered">
                                    <thead>

                                    <tr class="table-primary" style="background:dodgerblue">
                                        <th>推荐标签电影</th>
                                        <th>数据来源</th>
                                        <th>操作</th>
                                        <th>状态</th>
                                    </tr>

                                    </thead>
                                    <tbody>

                                    <tr>
                                        <td>热门电影推荐</td>
                                        <td>豆瓣网</td>
                                        <td>
                                            <button class="btn-primary btn" name="renmen/get/">更新数据</button>
                                        </td>
                                        <td><span class="badge badge-danger">未更新</span></td>
                                    </tr>


                                    <tr>
                                        <td>最新电影推荐</td>
                                        <td>豆瓣网</td>
                                        <td>
                                            <button class="btn-primary btn" name="new/get/">更新数据</button>
                                        </td>
                                        <td><span class="badge badge-danger">未更新</span></td>
                                    </tr>

                                    <tr>
                                        <td>经典电影推荐</td>
                                        <td>豆瓣网</td>
                                        <td>
                                            <button class="btn-primary btn" name="jingdian/get/">更新数据</button>
                                        </td>
                                        <td><span class="badge badge-danger">未更新</span></td>
                                    </tr>

                                    <tr>
                                        <td>豆瓣高分电影推荐</td>
                                        <td>豆瓣网</td>
                                        <td>
                                            <button class="btn-primary btn" name="top/get/">更新数据</button>
                                        </td>
                                        <td><span class="badge badge-danger">未更新</span></td>
                                    </tr>


                                    <tr>
                                        <td>豆瓣最新影评</td>
                                        <td>豆瓣网</td>
                                        <td>
                                            <button class="btn-primary btn" name="comment/get/">更新数据</button>
                                        </td>
                                        <td><span class="badge badge-danger">未更新</span></td>
                                    </tr>


                                </table>
            </div>


        </div><!-- /#page-wrapper -->

    </div><!-- /#wrapper -->
</div>
<!-- JavaScript -->
<script src="/static/js/jquery-1.10.2.js"></script>
<script src="/static/js/bootstrap.js"></script>

<!-- Page Specific Plugins -->
<script src="/static/js/raphael-min.js"></script>
<script src="/static/js/morris-0.4.3.min.js"></script>
<script src="/static/js/morris/chart-data-morris.js"></script>
<script src="/static/js/tablesorter/jquery.tablesorter.js"></script>
<script src="/static/js/tablesorter/tables.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            userss: ""
        },
        created() {
            // 判断是否已经登录
            this.userss = sessionStorage.getItem("username");
            if (this.userss == null) {
                alert("抱歉，您还未登录");
                window.location.href = "http://127.0.0.1:8000/login/"
            }

        },

    })
</script>
<script>

    $(".btn-primary").click(function () {
        $("body").addClass("zaoceng")
        var name = $(this).attr("name");
        var is = $(this)
        $.ajax({
            url: "http://127.0.0.1:8000/" + name,
            type: "GET",
            success: function (data) {

                if (data['code'] == 200) {
                    $("body").removeClass("zaoceng");
                    alert("数据更新成功");
                    is.parents("td").next().find("span").attr("class", "badge badge-success");
                    is.parents("td").next().find("span").text("已更新");
                } else {
                    alert("数据更新失败，可能是网速/网站更新的原因");
                    $("body").removeClass("zaoceng");
                }

            }
        });

    });
</script>


</body>
</html>
